<template>
  <!-- <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div> -->
  <div class="container">
    <img src="../../assets/img/custom/编组 13@2x.png" alt="" class="bg" />
    <div class="list">
      <div class="item">
        <img src="../../assets/img/custom/编组 14@2x.png" alt="" class="item-bg" />
        <div class="info">
          <div class="num">8121</div>
          <div class="info-title">试剂总存量</div>
          <div class="dw">(瓶)</div>
        </div>
      </div>
      <div class="item">
        <img src="../../assets/img/custom/编组 15@2x.png" alt="" class="item-bg" />
        <div class="info">
          <div class="num">8121</div>
          <div class="info-title">试剂总存量</div>
          <div class="dw">(瓶)</div>
        </div>
      </div>
      <div class="item">
        <img src="../../assets/img/custom/编组 16@2x.png" alt="" class="item-bg" />
        <div class="info">
          <div class="num">8121</div>
          <div class="info-title">试剂总存量</div>
          <div class="dw">(瓶)</div>
        </div>
      </div>
      <div class="item">
        <img src="../../assets/img/custom/编组 17@2x.png" alt="" class="item-bg" />
        <div class="info">
          <div class="num">8121</div>
          <div class="info-title">试剂总存量</div>
          <div class="dw">(瓶)</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { currentGET } from "api"
import { graphic } from "echarts"
export default {
  data() {
    return {
      options: {},
    }
  },
  props: {},
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.pageflag = true
      currentGET("big6", { companyName: this.companyName }).then(res => {
        console.log("安装计划", res)
        if (res.success) {
          this.init(res.data)
        } else {
          this.pageflag = false
          this.$Message({
            text: res.msg,
            type: "warning",
          })
        }
      })
    },
    init(newData) {
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            // 添加单位
            var result = params[0].name + "<br>"
            params.forEach(function (item) {
              if (item.value) {
                if (item.seriesName == "安装率") {
                  result += item.marker + " " + item.seriesName + " : " + item.value + "%</br>"
                } else {
                  result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>"
                }
              } else {
                result += item.marker + " " + item.seriesName + " :  - </br>"
              }
            })
            return result
          },
        },
        legend: {
          data: ["已安装", "计划安装", "安装率"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "0",
        },
        grid: {
          left: "50px",
          right: "40px",
          bottom: "30px",
          top: "20px",
        },
        xAxis: {
          data: newData.category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },

            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value}% ",
            },
          },
        ],
        series: [
          {
            name: "已安装",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#956FD4" },
                { offset: 1, color: "#3EACE5" },
              ]),
            },
            data: newData.barData,
          },
          {
            name: "计划安装",
            type: "bar",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(156,107,211,0.8)" },
                { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                { offset: 1, color: "rgba(156,107,211,0.2)" },
              ]),
            },
            z: -12,
            data: newData.lineData,
          },
          {
            name: "安装率",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              color: "#F02FC2",
            },
            data: newData.rateData,
          },
        ],
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  height: 100%;
  .bg {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 20px;
    left: 0;
    z-index: 1;
  }
  .list {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    .item {
      width: 100px;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .item-bg {
        width: 100%;
        height: 80%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .info {
        text-align: center;
        transform: translateY(-30px);
        .num {
          color: #23d1ff;
          font-size: 21px;
          margin-bottom: 10px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
        }
        .info-title {
          color: #ccd6d6;
          font-size: 14px;
          margin-bottom: 10px;
        }
        .dw {
          color: #ccd6d6;
          font-size: 14px;
        }
      }
    }
  }
}
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
